<template>
  <div id="changephone">
    <div class="middle">
      <div class="top">
        <ChevronLeftIcon @click="back()" class="back" />
        <div>手机号</div>
        <span>&nbsp;</span>
      </div>
      <div class="main">
        <div class="box2">请输入手机号</div>
        <div class="box3">
          <input type="text" v-model="pnum" />
          <button class="btn1" @click="getCode()">获取验证码</button>
          <input type="text" v-model="code" />
        </div>
        <button class="btn2" @click="change()">下一步</button>
      </div>
    </div>
  </div>
</template>
  
<script setup lang="ts">
import axios from "../../axios";
import "./changephone.css";
import { ChevronLeftIcon } from "tdesign-icons-vue-next";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
let router = useRouter();
let pnum = ref("");
let code = ref("");
let nowcode = ref("");
let getCode = async () => {
  let { data } = await axios.post("/getCode", {
    phonenum: pnum.value,
  });
  console.log(data);
  nowcode.value = data.codes;
  console.log(nowcode.value);
};

let change = () => {
  console.log(code + "||" + nowcode);

  if (Number(code.value) == Number(nowcode.value)) {
    localStorage.setItem("phone", pnum.value);
    router.push("/forgetpassword");
    console.log("成功");
  } else {
    ElMessage.error("请输入正确的验证码");
    console.log("失败");
  }
};

let back = () => {
  router.go(-1);
};
</script>
  
<style>
</style>